import { ExtractPropTypes, PropType } from "vue"
import { UPDATE_MODEL_EVENT } from '../../constants'
import { validatorColorValue } from '../../utils'

/**
 * 步骤条模式有效值
 */
const StepsModes = ['dot', 'number', 'icon', 'dotIcon'] as const
export type StepsMode = typeof StepsModes[number]

/**
 * 步骤条方向有效值
 */
const StepsDirections = ['horizontal', 'vertical'] as const
export type StepsDirection = typeof StepsDirections[number]

/**
 * 步骤条数据类型
 */
export type StepData = {
  /** 标题 */
  title?: string,
  /** 图标 */
  icon?: string,
  /** 选中时的图标 */
  activeIcon?: string,
  /** 未激活时的颜色 */
  inactiveColor?: string,
  /** 激活时的颜色 */
  activeColor?: string
}

/**
 * props参数
 */
export const stepsProps = {
  /** 当前选中的值, 用序号表示 */
  modelValue: {
    type: [String, Number],
    default: 0
  },
  /** 步骤条数据 */
  data: {
    type: Array as PropType<Array<StepData>>,
    default: () => {
      return []
    }
  },
  /** 步骤条模式 */
  mode: {
    type: String,
    default: 'dot',
    validator: (value: StepsMode) => {
      return StepsModes.includes(value)
    }
  },
  /** 步骤条方向 */
  direction: {
    type: String,
    default: 'horizontal',
    validator: (value: StepsDirection) => {
      return StepsDirections.includes(value)
    }
  },
  /** 未激活时的颜色, 支持十六进制、rgb()、rgba()的值 */
  inactiveColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value, false)
    }
  },
  /** 激活时的颜色, 支持十六进制、rgb()、rgba()的值 */
  activeColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value, false)
    }
  },
  /** 默认显示的icon */
  icon: {
    type: String,
    default: 'success'
  }
}
export type StepsProps = ExtractPropTypes<typeof stepsProps>

export const stepsEmits = {
  /** 值发生修改时触发的事件 */
  [UPDATE_MODEL_EVENT]: (index: string | number) => typeof index === 'string' || typeof index === 'number',
  change: (index: string | number) => typeof index === 'string' || typeof index === 'number'
}
export type StepsEmits = typeof stepsEmits
